import React, {Component} from 'react';
import PropTypes from 'prop-types';

//{ Component } 相当于 React.Component

class TodoItem extends Component {
    constructor(props) {
        super(props)

    }
    //在react中，当父组件的state或者props改变，重新渲染，也会影响子组件的render函数重新渲染
    //此时提高性能，可以设置shouldComponentUpdate 这个生命周期函数。
    //在react.component中，唯独render函数没有内置。
    shouldComponentUpdate(nextProps){
       if(nextProps.item!==this.props.item){
           return true
       }else{
           return  false
       }
    }

    render() {
        console.log('child render')
        return <div onClick={this.son}>{this.props.item}---{this.props.test}</div>
    }

    //此时的son方法  是通过父组件的方法，让子组件向父组件传值
    son=()=>{
        this.props.deleteItem(this.props.index)
    }

}
//类型校验 脚手架自带了prop-types
TodoItem.propTypes={
    //类型要不是字符串，要不是数字
    item:PropTypes.oneOfType([PropTypes.string,PropTypes.number]),
    son:PropTypes.func,
    test:PropTypes.string.isRequired
}

//设置默认值
TodoItem.defaultProps = {
    test: 'Stranger'
};

export default TodoItem;

